<template>
    <div v-if="_isMobile()" class="cus_footer">
        <div class="flex_column qr_wrapper">
            <img src="../../assets/image/abouts/ower_qrcode.png" alt="" class="qr_code"/>
            <span class="item_tip_text">关注我们，了解更多</span>
        </div>
        <div  class="flex_column contact_us_wrapper custom_wrapper_margin">
            <span class="item_title">联系我们</span>
            <span class="item_content mobile_contact_margin">电话：021-60947888</span>
            <span class="item_content mobile_contact_margin">邮箱：xsy@kiwithoughts.com</span>
            <span class="item_content mobile_contact_margin">地址：上海市浦东新区民生路1403号信息大厦905室</span>
            <span class="item_tip_text">沪公网安备 31011502010346号</span>
        </div>


        <div class="flex_column about_wrapper custom_wrapper_margin">
            <span class="item_title">关于我们</span>
            <span class="item_content">翔盛悦在具有深厚数据挖掘及金融场景应用的基础上引入具备资深金融从业经历的专业团队，致力于金融领域内的大数据商业化应用与服务，立志成为“终端客户和金融机构之间的连接器”。</span>
            <span class="item_tip_text">上海市翔盛悦信息技术有限公司 版权所有 沪ICP备20009635号</span>
        </div>

        <div class="flex_column value_wrapper">
            <span class="item_title">企业价值观</span>
            <span class="item_content">专业、高效、合规、进取、正直</span>
        </div>
    </div>
    <div v-else class="cus_footer">
        <div class="flex_column qr_wrapper">
            <img src='../../assets/image/abouts/ower_qrcode.png' alt="" class="qr_code"/>
            <span class="item_tip_text">关注我们，了解更多</span>
        </div>

        <div class="flex_column about_wrapper custom_wrapper_margin">
            <span class="item_title">关于我们</span>
            <span class="item_content">翔盛悦在具有深厚数据挖掘及金融场景应用的基础上引入具备资深金融从业经历的专业团队，致力于金融领域内的大数据商业化应用与服务，立志成为“终端客户和金融机构之间的连接器”。</span>
            <a href="https://beian.miit.gov.cn/#/Integrated/index" style="text-decoration:none;text-align: left;" class="item_tip_text">上海市翔盛悦信息技术有限公司 版权所有 沪ICP备20009635号</a>
        </div>
        <div  class="flex_column contact_us_wrapper custom_wrapper_margin">
            <span class="item_title">联系我们</span>
            <span class="item_content">电话：021-60947888 <br/>邮箱：xsy@kiwithoughts.com<br/>地址：上海市浦东新区民生路1403号信息大厦905室</span>
            <span class="item_tip_text">沪公网安备 31011502010346号</span>
        </div>
        <div class="flex_column value_wrapper">
            <span class="item_title">企业价值观</span>
            <span class="item_content">专业、高效、合规、进取、正直</span>
        </div>
    </div>

</template>

<script>
    export default {
        methods:{
            _isMobile(){
                let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
                return flag;
            }
        },
        mounted() {

        },
        data(){
            return{
            }
        }
    };
</script>

<style lang="scss">
    .cus_footer {
        background: #0d0e12;
        flex-direction: row;
        display: flex;
        padding: 2.68rem 200px;
        justify-content: space-between;

        span {
            color: $footerContent;
            text-align: left;
            font-size: 1rem;
        }

        .item_title {
            margin-bottom: 0.72rem;
            font-size: 0.75rem;
        }

        .item_content {
            flex: 1;
            font-size: 0.5rem;
            margin-bottom: 2rem;
            color: $footerContent;
        }

        .item_tip_text {
            font-size:0.55rem;
            color: $footerContent;
        }

        .qr_wrapper {
            justify-content: space-between;
            align-items: center;
            margin-right: 3.44rem;

            .qr_code {
                width: 4.8rem;
                height: 4.8rem;
                background-color: #42b983;
            }
        }

        .about_wrapper {
            max-width: 16rem;
        }

        .contact_us_wrapper {
            max-width: 14rem;
        }

        .value_wrapper {
            max-width: 7.72rem;
        }
        a:hover{
            color: deepskyblue;
        }
    }

    /**
    移动端样式
    */
    @media screen and (max-width: $mobile_width) {
        .cus_footer {
            flex-direction: column;
            padding: 18px;
            margin: 0;

            .qr_wrapper {
                justify-content: space-between;
                align-items: center;
                margin-right: 0;
                margin-bottom: 36px;

                .qr_code {
                    width: 6.4rem;
                    height: 6.4rem;
                    background-color: #42b983;
                }

                .item_tip_text {
                    margin-top: 9px;
                }

            }

            .item_title {
                margin-bottom: 5px;
                font-size: $fz14;
            }
            .item_content {
                flex: 1;
                font-size: $fz12;
                margin-bottom: 0px;
                color: $footerContent;
                line-height: 18px;
            }

            .mobile_contact_margin{
                margin-bottom: 8px;
            }

            .item_tip_text {
                font-size: $fz12;
                color: $footerContent;
            }
            a{
                text-decoration: none;
            }
            .about_wrapper {
                max-width: 100%;
            }

            .contact_us_wrapper {
                max-width: 100%;
                margin-bottom: 18px;
            }

            .value_wrapper {
                max-width: 100%;
                margin-top: 18px;
            }
        }
    }
</style>
